/**
 * Loading 全局加载指示器
 * 用于显示全局加载状态
 */

export interface LoadingOptions {
  /** 加载提示文本 */
  text?: string;
  /** 是否显示遮罩 */
  overlay?: boolean;
  /** 遮罩透明度 */
  overlayOpacity?: number;
  /** 加载动画尺寸 */
  size?: 'small' | 'medium' | 'large';
  /** 自定义样式类名 */
  className?: string;
  /** z-index层级 */
  zIndex?: number;
}

export interface LoadingInstance {
  /** 关闭加载指示器 */
  close: () => void;
}

let activeLoadingInstance: HTMLDivElement | null = null;

/**
 * 显示全局加载指示器
 */
export const show = (options?: LoadingOptions | string): LoadingInstance => {
  // 如果已经有loading在显示，直接返回现有实例
  if (activeLoadingInstance) {
    return {
      close: () => hide(),
    };
  }

  // 处理参数
  const config: LoadingOptions = typeof options === 'string' ? { text: options } : options || {};

  const {
    text = '加载中...',
    overlay = true,
    overlayOpacity = 0.5,
    size = 'medium',
    className = '',
    zIndex = 9999,
  } = config;

  // 创建容器
  const container = document.createElement('div');
  container.className = `adnaan-loading ${className}`;
  container.setAttribute('role', 'alert');
  container.setAttribute('aria-busy', 'true');
  container.setAttribute('aria-live', 'polite');

  // 样式
  const sizeMap = {
    small: '32px',
    medium: '48px',
    large: '64px',
  };

  const spinnerSize = sizeMap[size];

  container.innerHTML = `
    <style>
      .adnaan-loading {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: ${zIndex};
        pointer-events: ${overlay ? 'auto' : 'none'};
      }

      .adnaan-loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, ${overlayOpacity});
        backdrop-filter: blur(2px);
      }

      .adnaan-loading-content {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 24px 32px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        pointer-events: auto;
      }

      .adnaan-loading-spinner {
        width: ${spinnerSize};
        height: ${spinnerSize};
        border: 3px solid rgba(79, 70, 229, 0.2);
        border-top-color: #4f46e5;
        border-radius: 50%;
        animation: adnaan-spin 0.8s linear infinite;
      }

      @keyframes adnaan-spin {
        to {
          transform: rotate(360deg);
        }
      }

      .adnaan-loading-text {
        color: #374151;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
      }

      /* 深色模式支持 */
      @media (prefers-color-scheme: dark) {
        .adnaan-loading-content {
          background: #1f2937;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        }

        .adnaan-loading-text {
          color: #e5e7eb;
        }

        .adnaan-loading-spinner {
          border-color: rgba(139, 92, 246, 0.2);
          border-top-color: #8b5cf6;
        }
      }

      /* 淡入动画 */
      .adnaan-loading {
        animation: adnaan-loading-fadein 0.2s ease;
      }

      @keyframes adnaan-loading-fadein {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      /* 淡出动画 */
      .adnaan-loading.adnaan-loading-fadeout {
        animation: adnaan-loading-fadeout 0.2s ease;
      }

      @keyframes adnaan-loading-fadeout {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
    </style>
    ${overlay ? '<div class="adnaan-loading-overlay"></div>' : ''}
    <div class="adnaan-loading-content">
      <div class="adnaan-loading-spinner"></div>
      ${text ? `<div class="adnaan-loading-text">${text}</div>` : ''}
    </div>
  `;

  // 添加到页面
  document.body.appendChild(container);
  activeLoadingInstance = container;

  // 返回实例
  return {
    close: () => hide(),
  };
};

/**
 * 隐藏全局加载指示器
 */
export const hide = (): void => {
  if (!activeLoadingInstance) {
    return;
  }

  const container = activeLoadingInstance;

  // 添加淡出动画
  container.classList.add('adnaan-loading-fadeout');

  // 动画结束后移除
  setTimeout(() => {
    if (container.parentNode) {
      container.parentNode.removeChild(container);
    }
    activeLoadingInstance = null;
  }, 200);
};

/**
 * 检查是否正在显示loading
 */
export const isLoading = (): boolean => {
  return activeLoadingInstance !== null;
};

// 导出默认对象
export default {
  show,
  hide,
  isLoading,
};

